<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档合并工具</title>
    <link rel="icon" href="/assets/ico/7favicon.png" type="image/png">
    <!-- 使用国内CDN -->
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">
    <style>
        /* 基础样式 */
        .bg-gray-50 { background-color: #f9fafb; }
        .bg-white { background-color: #ffffff; }
        .text-gray-900 { color: #111827; }
        .text-gray-700 { color: #374151; }
        .text-gray-600 { color: #4b5563; }
        .text-gray-500 { color: #6b7280; }
        .text-gray-400 { color: #9ca3af; }
        .text-blue-600 { color: #2563eb; }
        .text-green-500 { color: #10b981; }
        .text-red-500 { color: #ef4444; }
        
        /* 布局样式 */
        .min-h-screen { min-height: 100vh; }
        .max-w-7xl { max-width: 80rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mt-4 { margin-top: 1rem; }
        
        /* 组件样式 */
        .file-drop-zone {
            border: 2px dashed #cbd5e0;
            transition: all 0.3s ease;
        }
        .file-drop-zone.dragover {
            border-color: #4299e1;
            background-color: #ebf8ff;
        }
        .file-item {
            transition: all 0.3s ease;
        }
        .file-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .progress-bar {
            transition: width 0.3s ease;
        }
        .feature-card {
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* 模态框样式 */
        .modal {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50;
        }
        .modal-content {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            max-width: 24rem;
            width: 100%;
            margin: 0 1rem;
        }
        
        /* 浮动进度条样式 */
        .floating-progress {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            width: 22rem;
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 1rem;
            z-index: 50;
            transition: all 0.3s ease;
            transform: translateY(150%);
            opacity: 0;
            border: 1px solid #e5e7eb;
        }
        
        .floating-progress.visible {
            transform: translateY(0);
            opacity: 1;
        }
        
        .floating-progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        
        .stage-pills {
            display: flex;
            margin-bottom: 0.75rem;
            overflow-x: auto;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        
        .stage-pills::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        
        .stage-pill {
            flex-shrink: 0;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            margin-right: 0.5rem;
            background-color: #f3f4f6;
            color: #6b7280;
            white-space: nowrap;
        }
        
        .stage-pill.active {
            background-color: #dbeafe;
            color: #1e40af;
            font-weight: 500;
        }
        
        .stage-pill.completed {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .close-btn {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f3f4f6;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .close-btn:hover {
            background-color: #e5e7eb;
            color: #4b5563;
        }
        
        .minimize-btn {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f3f4f6;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-right: 0.5rem;
        }
        
        .minimize-btn:hover {
            background-color: #e5e7eb;
            color: #4b5563;
        }
        
        .floating-progress.minimized {
            width: auto;
            padding: 0.5rem;
        }
        
        .progress-content {
            transition: all 0.3s ease;
        }
        
        .floating-progress.minimized .progress-content {
            display: none;
        }
        
        .floating-progress.minimized .stage-pills {
            display: none;
        }
        
        .floating-progress.minimized .floating-progress-title {
            display: none;
        }
        
        .expand-btn {
            display: none;
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            align-items: center;
            justify-content: center;
            background-color: #dbeafe;
            color: #1e40af;
            cursor: pointer;
        }
        
        .floating-progress.minimized .expand-btn {
            display: flex;
        }
        
        /* 进度条美化样式 */
        .progress-bar-wrapper {
            height: 0.75rem;
            background-color: #e5e7eb;
            border-radius: 9999px;
            overflow: hidden;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .progress-bar {
            height: 100%;
            border-radius: 9999px;
            transition: width 0.5s ease, background-color 0.3s ease;
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-size: 1rem 1rem;
            animation: progress-bar-stripes 1s linear infinite;
        }
        
        @keyframes progress-bar-stripes {
            0% { background-position: 1rem 0; }
            100% { background-position: 0 0; }
        }
        
        .progress-info {
            display: flex;
            justify-content: space-between;
            margin-top: 0.5rem;
        }
    </style>
    <!-- 资源加载失败处理 -->
    <script>
        window.addEventListener('error', function(e) {
            if (e.target.tagName === 'LINK' || e.target.tagName === 'SCRIPT') {
                console.error('资源加载失败:', e.target.href || e.target.src);
                // 如果CDN资源加载失败，尝试加载本地资源
                if (e.target.href && e.target.href.includes('cdn.bootcdn.net')) {
                    const localPath = e.target.href.split('/').pop();
                    e.target.href = 'css/' + localPath;
                }
            }
        }, true);
    </script>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- 顶部导航栏 -->
        <nav class="bg-white shadow-sm">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex">
                        <div class="flex-shrink-0 flex items-center">
                            <i class="fas fa-file-pdf text-blue-600 text-2xl mr-2"></i>
                            <span class="text-xl font-semibold text-gray-900">文档合并工具</span>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <a href="/index.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
                            <i class="fas fa-home mr-1"></i>返回首页
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8">
            <!-- 功能说明卡片 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <h2 class="text-base font-semibold text-gray-900 mb-3">使用说明</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="feature-card bg-blue-50 rounded-lg p-3">
                        <div class="text-blue-600 text-xl mb-1">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h3 class="font-medium text-gray-900 text-sm mb-1">相同格式合并</h3>
                        <p class="text-gray-600 text-xs">支持两个Word或两个PDF文件合并，可自由选择合并顺序</p>
                    </div>
                    <div class="feature-card bg-green-50 rounded-lg p-3">
                        <div class="text-green-600 text-xl mb-1">
                            <i class="fas fa-sync-alt"></i>
                        </div>
                        <h3 class="font-medium text-gray-900 text-sm mb-1">自动格式转换</h3>
                        <p class="text-gray-600 text-xs">Word和PDF混合上传时，自动将Word转换为PDF后合并</p>
                    </div>
                    <div class="feature-card bg-purple-50 rounded-lg p-3">
                        <div class="text-purple-600 text-xl mb-1">
                            <i class="fas fa-clock"></i>
                        </div>
                        <h3 class="font-medium text-gray-900 text-sm mb-1">快速处理</h3>
                        <p class="text-gray-600 text-xs">合并过程通常在1分钟内完成，请耐心等待处理结果</p>
                    </div>
                </div>
            </div>

            <!-- 文件上传区域 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- 试卷上传框 -->
                <div class="bg-white rounded-lg shadow-md p-4">
                    <div class="text-center mb-3">
                        <i class="fas fa-file-alt text-2xl text-blue-500 mb-1"></i>
                        <h3 class="text-base font-semibold text-gray-700">上传试卷</h3>
                        <p class="text-xs text-gray-500">支持PDF、Word格式</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-blue-500 transition-colors duration-200"
                         id="examDropZone">
                        <input type="file" id="examFileInput" class="hidden" accept=".pdf,.doc,.docx">
                        <div class="space-y-1">
                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400"></i>
                            <p class="text-sm text-gray-500">点击或拖拽文件到此处</p>
                            <p class="text-xs text-gray-400">支持PDF、Word格式，最大20MB</p>
                        </div>
                    </div>
                    <div id="examFileList" class="mt-3 space-y-2"></div>
                </div>
                
                <!-- 答案上传框 -->
                <div class="bg-white rounded-lg shadow-md p-4">
                    <div class="text-center mb-3">
                        <i class="fas fa-file-signature text-2xl text-green-500 mb-1"></i>
                        <h3 class="text-base font-semibold text-gray-700">上传答案</h3>
                        <p class="text-xs text-gray-500">支持PDF、Word格式</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-green-500 transition-colors duration-200"
                         id="answerDropZone">
                        <input type="file" id="answerFileInput" class="hidden" accept=".pdf,.doc,.docx">
                        <div class="space-y-1">
                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400"></i>
                            <p class="text-sm text-gray-500">点击或拖拽文件到此处</p>
                            <p class="text-xs text-gray-400">支持PDF、Word格式，最大20MB</p>
                        </div>
                    </div>
                    <div id="answerFileList" class="mt-3 space-y-2"></div>
                </div>
            </div>

            <!-- 合并选项 -->
            <div class="mt-4 bg-white rounded-lg shadow-sm p-4">
                <h3 class="text-base font-medium text-gray-900 mb-3">合并选项</h3>
                <div class="flex space-x-6">
                    <label class="inline-flex items-center">
                        <input type="radio" name="mergeOrder" value="question_first" checked class="form-radio text-blue-600">
                        <span class="ml-2 text-gray-700">试题在前</span>
                    </label>
                    <label class="inline-flex items-center">
                        <input type="radio" name="mergeOrder" value="answer_first" class="form-radio text-blue-600">
                        <span class="ml-2 text-gray-700">答案在前</span>
                    </label>
                </div>
            </div>

            <!-- 合并按钮 -->
            <div class="mt-2 text-center">
                <button id="mergeButton" 
                        class="bg-blue-500 text-white px-6 py-1.5 rounded-lg hover:bg-blue-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                        disabled>
                    <i class="fas fa-object-group mr-1"></i>开始合并
                </button>
            </div>

            <!-- 进度显示区域 -->
            <div id="progressArea" class="bg-white rounded-lg shadow-sm p-2 mt-1 hidden">
                <!-- 移除主进度条区域，但保留隐藏的div以避免JS错误 -->
                <div style="display:none">
                    <div id="progressBar"></div>
                    <div id="progressText"></div>
                    <div id="progressStatus"></div>
                    <div id="processLog">
                        <div>
                            <p class="log-entry">准备处理文档...</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 结果区域 -->
            <div id="resultArea" class="bg-white rounded-lg shadow-sm p-2 mt-1 hidden">
                <div class="text-center">
                    <div class="text-green-500 text-2xl mb-1">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3 class="text-sm font-medium text-gray-900 mb-0.5">合并完成</h3>
                    <p class="text-xs text-gray-500 mb-2">文件已成功合并，可以下载了</p>
                    <button type="button" id="downloadBtn" class="px-3 py-1 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                        <i class="fas fa-download mr-1"></i>下载合并文件
                    </button>
                </div>
            </div>
        </main>
    </div>

    <!-- 加载中遮罩 -->
    <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
            <div class="flex items-center justify-center mb-4">
                <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div>
            </div>
            <p class="text-center text-gray-700" id="loadingText">正在处理中，请稍候...</p>
        </div>
    </div>

    <!-- 错误提示模态框 -->
    <div id="errorModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
            <div class="text-red-500 text-4xl mb-4 text-center">
                <i class="fas fa-exclamation-circle"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2 text-center">处理失败</h3>
            <p class="text-sm text-gray-500 mb-4 text-center" id="errorMessage"></p>
            <div class="flex justify-center">
                <button type="button" id="closeErrorModal" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>
    
    <!-- 添加浮动进度条 -->
    <div id="floatingProgress" class="floating-progress" style="display: none;">
        <div class="floating-progress-header">
            <div class="flex items-center">
                <div class="expand-btn">
                    <i class="fas fa-expand-alt"></i>
                </div>
                <h3 class="text-sm font-medium text-gray-900 floating-progress-title flex items-center">
                    <i class="fas fa-object-group text-blue-600 mr-2"></i>
                    文档合并进度
                </h3>
            </div>
            <div class="flex">
                <div class="minimize-btn">
                    <i class="fas fa-minus"></i>
                </div>
                <div class="close-btn">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
        
        <div class="stage-pills">
            <div class="stage-pill" data-stage="1">文件上传</div>
            <div class="stage-pill" data-stage="2">解析内容</div>
            <div class="stage-pill" data-stage="3">合并文档</div>
            <div class="stage-pill" data-stage="4">生成结果</div>
        </div>
        
        <div class="progress-content">
            <div class="progress-bar-wrapper">
                <div id="floatingProgressBar" class="progress-bar bg-blue-600" style="width: 0%"></div>
            </div>
            <div class="progress-info">
                <p id="floatingStatusText" class="text-sm text-gray-600">准备处理文档...</p>
                <span id="floatingProgressText" class="text-sm font-medium text-blue-600">0%</span>
            </div>
        </div>
    </div>

    <script src="js/api.js"></script>
    <script src="js/document-merge.js"></script>
    
    <!-- 添加浮动进度条控制脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 浮动进度条元素
            const floatingProgress = document.getElementById('floatingProgress');
            const minimizeBtn = document.querySelector('.minimize-btn');
            const expandBtn = document.querySelector('.expand-btn');
            const closeBtn = document.querySelector('.close-btn');
            
            // 浮动进度条控制
            if (minimizeBtn) {
                minimizeBtn.addEventListener('click', function() {
                    floatingProgress.classList.add('minimized');
                });
            }
            
            if (expandBtn) {
                expandBtn.addEventListener('click', function() {
                    floatingProgress.classList.remove('minimized');
                });
            }
            
            if (closeBtn) {
                closeBtn.addEventListener('click', function() {
                    floatingProgress.classList.remove('visible');
                    setTimeout(() => {
                        floatingProgress.style.display = 'none';
                    }, 300);
                });
            }
            
            // 修改合并按钮事件
            const mergeButton = document.getElementById('mergeButton');
            if (mergeButton) {
                const originalClick = mergeButton.onclick;
                mergeButton.onclick = function(e) {
                    // 显示浮动进度条
                    if (floatingProgress) {
                        floatingProgress.style.display = 'block';
                        setTimeout(() => {
                            floatingProgress.classList.add('visible');
                        }, 10);
                    }
                    
                    // 执行原始点击事件
                    if (originalClick) {
                        return originalClick.call(this, e);
                    }
                };
            }
        });
    </script>
</body>
</html> 